<template>
  <!-- 树形结构--分配权限 -->
  <el-dialog title="分配权限" :visible.sync="dialogVisible">
    <!-- show-checkbox:显示树形结构中的复选款
    node-key: 渲染优化的值,通过值为id,相当于v-for中使用的key
    check-strictly:true 表示父子互不关联
    default-checked-keys: 设置数据回显的属性
    :缺点,只能回显一次,就是当绑定的数据发生变化的时候不会重置之前的数据
    我们不能使用这个方法 换一个方法: setCheckedKeys方法
     -->
    <el-tree
      ref="trees"
      default-expand-all
      :data="treeData"
      :props="{label: 'title'}"
      show-checkbox
      :check-strictly="true"
      node-key="id"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="closePerFn">取 消</el-button>
      <el-button type="primary" @click="confirmPerFn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getPermissions, updataRole, getRoleDetail } from '@/api/roles'
import { listToTree } from '@/utils/index'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      return: {
        treeData: [], // 所有权限列表
        permIds: [], // 选中的权限
        curId: null
      }
    }
  },
  async created() {
    // 获取所有权限列表
    const res = await getPermissions()
    this.treeData = listToTree(res, '0')
  },
  methods: {
    // 点击确定分配权限
    async  confirmPerFn() {
      const res = await this.$refs.trees.getCheckedKeys()
      // 调用接口添加权限
      await updataRole({
        id: this.curId,
        permissions: res
      })
      this.$message.success('添加成功')
      // 关闭弹窗
      this.closePerFn()
    },
    // 点击关闭弹窗
    closePerFn() {
      this.$emit('update:dialogVisible', false)
      // 关闭弹窗 重置选中的选项
      this.$refs.trees.setCheckedKeys([])
    },
    // 获取角色详情
    // 调用接口获角色列表
    async getRoleDetail(id) {
      this.curId = id
      const res = await getRoleDetail(id)
      console.log(127, res)
      // 获取角色已有权限
      res.permissions.forEach(item => {
        return this.permIds.push(item.id)
      })
      this.$refs.trees.setCheckedKeys(this.permIds)
    }

  }
}
</script>

<style>

</style>
